import React, {
  useState,
  useEffect,
  useRef,
  useMemo,
  useCallback,
} from "react";
import { useNavigate } from "react-router-dom";
import emitter from "../bus.js";
import AIIcon from "@/assets/images/AI.png";
import aiBg1 from "@/assets/images/aibg1.png";
import aiBg2 from "@/assets/images/aibg2.png";
import aiBg3 from "@/assets/images/aibg3.png";
import aiBg4 from "@/assets/images/aibg4.png";
import aiBg5 from "@/assets/images/aibg5.png";
import notice from '@/assets/new_home/notice.png'

// Import components
import CalendarPlan from '@/views/agents/calendarPlan';
import MailHanding from '@/views/agents/mailHanding';
import BossCalledMe from '@/views/agents/bossCalledMe';
import MailList from '@/views/agents/mailList';
import WriteEmail from '@/views/agents/writeEmail';
import ProjectPlan from '@/views/agents/projectPlan';
import SquareEnd from '@/views/agents/squareend';

const Square = (props) => {
  const navigate = useNavigate();
  const [cardList, setcCardList] = useState([]);
  const [selectedComponent, setSelectedComponent] = useState(null);

  // Component mapping
  const componentMap = {
    9: CalendarPlan,
    10: MailHanding,
    11: BossCalledMe,
    12: MailList,
    13: WriteEmail,
    14: ProjectPlan,
    16: SquareEnd
  };

  //9：calendarPlan.jsx
  //10:mailHanding.jsx
  //11:bossCalledMe.jsx
  //12:mailList.jsx
  //13:writeEmail.jsx
  //14:projectPlan.jsx
  //16:squareend.jsx
  const data = [
    {
      "Id": 9,
      "Title": "建议周章",
      "descrption": "展示一周内(含多日)日历安排",
      "router": "false",
      "background": null,
      "buttonText": null,
      "bot_id": null,
      "bot_index": null,
      "labels": null,
      "ID": 9,
      "Modified": "2025-05-09T07:52:30Z",
      "Created": "2025-05-09T07:52:30Z",
      "AuthorId": 7,
      "EditorId": 7,
      "Attachments": true,
      "attachmentUrls": [
        "https://yuchentech.sharepoint.com/sites/ai-rotbots/Lists/ai/Attachments/9/Calendar.png"
      ]
    },
    {
      "Id": 10,
      "Title": "上周邮件",
      "descrption": "展示经理邮件以及高频邮件",
      "router": "false",
      "background": null,
      "buttonText": null,
      "bot_id": null,
      "bot_index": null,
      "labels": null,
      "ID": 10,
      "Modified": "2025-05-09T07:53:11Z",
      "Created": "2025-05-09T07:53:11Z",
      "AuthorId": 7,
      "EditorId": 7,
      "Attachments": true,
      "attachmentUrls": [
        "https://yuchentech.sharepoint.com/sites/ai-rotbots/Lists/ai/Attachments/10/Mail-review.png"
      ]
    },
    {
      "Id": 11,
      "Title": "老板呼我",
      "descrption": "近48小时经理邮件",
      "router": "false",
      "background": null,
      "buttonText": null,
      "bot_id": null,
      "bot_index": null,
      "labels": null,
      "ID": 11,
      "Modified": "2025-05-09T07:55:17Z",
      "Created": "2025-05-09T07:55:16Z",
      "AuthorId": 7,
      "EditorId": 7,
      "Attachments": true,
      "attachmentUrls": [
        "https://yuchentech.sharepoint.com/sites/ai-rotbots/Lists/ai/Attachments/11/Email-search.png"
      ]
    },
    {
      "Id": 12,
      "Title": "周务列要",
      "OData__ColorTag": null,
      "ComplianceAssetId": null,
      "descrption": "汇总邮件内近一周待办、人物事项",
      "router": "false",
      "background": null,
      "buttonText": null,
      "bot_id": null,
      "bot_index": null,
      "labels": null,
      "ID": 12,
      "Modified": "2025-05-09T07:56:14Z",
      "Created": "2025-05-09T07:56:14Z",
      "AuthorId": 7,
      "EditorId": 7,
      "Attachments": true,
      "attachmentUrls": [
        "https://yuchentech.sharepoint.com/sites/ai-rotbots/Lists/ai/Attachments/12/List.png"
      ]
    },
    {
      "Id": 13,
      "Title": "智能撰写",
      "OData__ColorTag": null,
      "ComplianceAssetId": null,
      "descrption": "AI助写邮件内容",
      "router": "false",
      "background": null,
      "buttonText": null,
      "bot_id": "app-tqiCdqkiXAqNcfMSdNxwe9d2",
      "bot_index": null,
      "labels": null,
      "ID": 13,
      "Modified": "2025-05-10T02:21:15Z",
      "Created": "2025-05-09T07:57:06Z",
      "AuthorId": 7,
      "EditorId": 7,
      "Attachments": true,
      "attachmentUrls": [
        "https://yuchentech.sharepoint.com/sites/ai-rotbots/Lists/ai/Attachments/13/Writing-fluently.png"
      ]
    },
    {
      "Id": 14,
      "Title": "项目计划",
      "OData__ColorTag": null,
      "ComplianceAssetId": null,
      "descrption": "规划任务、搞笑管全程",
      "router": "false",
      "background": null,
      "buttonText": null,
      "bot_id": null,
      "bot_index": null,
      "labels": null,
      "ID": 14,
      "Modified": "2025-05-09T07:57:36Z",
      "Created": "2025-05-09T07:57:36Z",
      "AuthorId": 7,
      "EditorId": 7,
      "Attachments": true,
      "attachmentUrls": [
        "https://yuchentech.sharepoint.com/sites/ai-rotbots/Lists/ai/Attachments/14/Plan.png"
      ]
    },
    {
      "Id": 15,
      "Title": "理解概要",
      "descrption": "自动提取文本核心、智能问答",
      "router": "true",
      "background": null,
      "buttonText": null,
      "bot_id": "app-tqiCdqkiXAqNcfMSdNxwe9d2",
      "bot_index": null,
      "labels": null,
      "ID": 15,
      "Modified": "2025-05-10T02:22:28Z",
      "Created": "2025-05-09T07:58:12Z",
      "AuthorId": 7,
      "EditorId": 7,
      "Attachments": true,
      "attachmentUrls": [
        "https://yuchentech.sharepoint.com/sites/ai-rotbots/Lists/ai/Attachments/15/Doc-add.png"
      ]
    },
    {
      "Id": 16,
      "Title": "文档对比",
      "OData__ColorTag": null,
      "ComplianceAssetId": null,
      "descrption": "辅助版本核对、内容审核",
      "router": "false",
      "background": null,
      "buttonText": null,
      "bot_id": null,
      "bot_index": null,
      "labels": null,
      "ID": 16,
      "Modified": "2025-05-09T07:58:55Z",
      "Created": "2025-05-09T07:58:55Z",
      "AuthorId": 7,
      "EditorId": 7,
      "Attachments": true,
      "attachmentUrls": [
        "https://yuchentech.sharepoint.com/sites/ai-rotbots/Lists/ai/Attachments/16/Newspaper-folding.png"
      ]
    }
  ]

  const getList = () => {
    let tablelist = data
      .map(item => {
        return {
          id: item.Id,
          title: item.Title,
          content: item.descrption,
          iconUrl: item.attachmentUrls.length > 0 ? item.attachmentUrls[0] : '',
          dept: item.labels,
          router: item.router,
          bot_id: item.bot_id,
        }
      });
    setcCardList(tablelist)
  }
  useEffect(() => {
    getList()
  }, []);

  const handCard = (data) => {
    console.log("data", data)
    // Set the selected component based on ID
    setSelectedComponent(data.id);
    
    // 跳转问答
    let dataObj ={}
    if (data.router === "true") {
      dataObj = {
        bot_id: data.bot_id,
        index: 1,
        id: data.id,
        bot_index: data.bot_index,
        isChat: data.router
      };
    } else {
      // 展示其他页面
      dataObj = {
        bot_id: data.bot_id,
        index: 2,
        id: data.id,
        bot_index: data.bot_index,
        isChat: data.router
      };
    }
    emitter.emit('message', dataObj);
    props.handTabChange(dataObj);
  }

  const renderSelectedComponent = () => {
    if (!selectedComponent) return null;
    const Component = componentMap[selectedComponent];
    return Component ? <Component /> : null;
  }

  return (
    <div className="square-container">
      {selectedComponent ? (
        renderSelectedComponent()
      ) : (
        <div>
          <div className="square-header">
            <span className="square-title">AI智能体</span>
          </div>
          <div className="home-card">
            {cardList.map((card) => (
              <div
                key={card.id}
                className="card-item"
                onClick={() => handCard(card)}
              >
                <div className="card-title-container">
                  <div className="card-title">
                    {card.title}</div>
                </div>
                <p className="card-desc">{card.content}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      <style jsx="true">{`
        .square-container {
          width: 93.5vw;
          min-width: 1400px;
          height: 95vh;
          display: flex;
          flex-direction: column;
          position: relative;
          margin: 2.5vh 24px 2.5vh 0;
          margin-left:130px;
          border-radius: 14px;
        }
        
        .square-header {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 40px;
          margin: 20px;
          margin-top:100px;
        }
        
        .square-header img {
          width:auto;
          margin-right: 10px;
        }
        
        .square-title {
          font-size: 20px;
          font-weight: 500;
        }
        
        .el-card {
          background-color: #fff;
          width: 415px;
          height: 300px;
          margin: 5px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: stretch;
          border-radius: 8px;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }
        
        .card-content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 100%;
          padding: 16px;
          box-sizing: border-box;
        }
        
        .card-title {
          font-size: 15px;
          font-weight: 700;
          margin-top: 20px;
          margin-left: 10px;
          margin-bottom: 10px;
        }
        
        .card-desc {
          flex-grow: 1;
          font-size: 12px;
          margin-left: 10px;
          color: #999999;
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        
        .card-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          top: -22px;
          font-size: 12px;
        }
        
        .card-btn button {
          padding: 15px 30px;
        }
        
        .right-icon {
          margin-left: 5px;
          font-size: 14px;
        }
        
        .card-container {
          display: flex;
          flex-direction: row;
          min-width: 1400px;
          flex-wrap: wrap;
          margin: 0 20px;
          height: 700px;
          overflow-y: auto;
          gap: 16px;
        }
          
.home-card{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px;
  width:calc(100% - 170px);
  margin: 20px auto;
}
  .card-item{
  border-radius: 16px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  height:117px;
 cursor: pointer;
  }
  .notice-icon{
  position: relative;
    top: 2px;
    margin-right: 10px;
  }
.card-title-container{
    display: flex;
    align-items: center;
}
.card-title{
    display: flex;
         flex-direction: row;

font-weight:500;
}
      `}</style>
    </div>
  );
};

Square.defaultProps = {
  handTabChange: () => { }
};

export default Square;